<template>
  <div id="a">
    <img :src="imgs[index]" style="width: 900px" alt="">
    <br>
    <button type="button" @click="toLeft()">左</button>
    <button type="button" @click="toRight()">右</button>
  </div>
</template>

<script>
import img1 from "../../static/img/1.jpg"
import img2 from "../../static/img/2.jpg"
import img3 from "../../static/img/3.jpg"
import img4 from "../../static/img/4.jpg"
import img5 from "../../static/img/5.jpg"

export default {
  name: "PhotoCarousel",
  el: "#a",
  data() { //ES6
    return {
      // imgs: [img1, img2, img3, img4, img5],
      imgs: ["../static/img/1.jpg","../static/img/2.jpg","../static/img/3.jpg","../static/img/4.jpg","../static/img/5.jpg"],
      index: 0
    }
  },
  methods: {
    "toLeft": function () {
      this.index--;
      if (this.index < 0) {
        this.index = this.imgs.length - 1;
      }
    },
    "toRight": function () {
      this.index++;
      if (this.index > this.imgs.length - 1) {
        this.index = 0;
      }
    }
  }
}
</script>

<style scoped>

</style>
